/*
 *注册用户页面文件
 */
'use strict';
import React, { Component } from 'react';
import { Link, browserHistory } from 'react-router';
import { connect } from 'react-redux';
import { Row, Col, InputNumber, Button, Card, Breadcrumb, Input, Form, Select, DatePicker, message} from 'antd';
import {regionArray,projectData,endexData,analysisJson,adminUser,dynamic} from '@app/constants/DataSource.jsx';
import $ from 'jquery';
const FormItem = Form.Item;
const Option = Select.Option;
const { TextArea } = Input;
const {RangePicker} = DatePicker;
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
class userZhuce extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading:true,
      confirmDirty: false,
      autoCompleteResult: [],
      startDate:'',
      endDate:'',
      userList:''
    };
  }

  componentDidMount(){
    setTimeout(() => {
    this.setState({loading:false});
    },300);
  }

  onChange = (date, dateString) => {
    this.setState({startDate:dateString[0],endDate:dateString[1]});
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {       
        $.post('http://localhost:3000/addUser',values,(json) =>{
          if(json.status === '0'){
            message.success('注册成功');
        browserHistory.push('/UserManage');

          }else{
            message.success('注册失败');
          }
        });

      }
    });
  }
   
  render() {  
    const { getFieldDecorator } = this.props.form;
    const { autoCompleteResult } = this.state;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 8,
        },
      },
    };

    return (
      <div className = 'projectForm'>
        <Card>
          <Breadcrumb>
            <Breadcrumb.Item><Link to = '/Analysis'>首页</Link></Breadcrumb.Item>
            <Breadcrumb.Item>人员注册</Breadcrumb.Item>
          </Breadcrumb>
          <p style = {{fontSize:20,paddingTop:20}}>人员注册</p>
        </Card>
        <Card style = {{marginTop:20}}>
          <Row>
            <Col span = {12} offset = {5}>
              <Form onSubmit={this.handleSubmit}>
                <FormItem
                  {...formItemLayout}
                  label="手机号码"
                >
                  {getFieldDecorator('tel', {
                    rules: [{
                      required: true, message: '请输入手机号码',
                    }],
                  })(
                    <Input placeholder = '请输入手机号码'/>
                  )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="职位"
                >
                  {getFieldDecorator('position', {
                    rules: [{
                      required: true, message: '请选择职位',
                    }],
                  })(
                    <Select placeholder="请选择职位">
                      <Option value="1">系统管理员</Option>
                      <Option value="2">分析员</Option>
                      <Option value='3'>项目管理员</Option>
                      <Option value='4'>财务</Option>
                      <Option value='5'>净化员</Option>
                      <Option value='6'>其他</Option>
                    </Select>
                  )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="密码"
                >
                  {getFieldDecorator('password', {
                    rules: [{
                      required: true, message: '请输入密码',
                    }],
                  })(
                    <Input  placeholder = '请输入密码'/>
                  )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="姓名"
                >
                  {getFieldDecorator('name', {
                    rules: [{ required: true, message: '请输入姓名' }],
                  })(
                    <Input placeholder = '请输入姓名'/>
                  )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="部门"
                >
                  {getFieldDecorator('depament', {
                    rules: [{
                      required: true, message: '请选择部门',
                    }],
                  })(
                    <Select placeholder="请选择部门">
                      <Option value="1">ZHS-01</Option>
                      <Option value="2">ZHS-02</Option>
                      <Option value='3'>ZHS-03</Option>
                      <Option value='4'>ZHS-04</Option>
                      <Option value='5'>ZHS-05</Option>
                    </Select>
                  )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="性别"
                >
                  {getFieldDecorator('gender', {
                    rules: [{ required: true, message: '请选择性别' }],
                  })(
                   <Select placeholder="请选择性别">
                      <Option value="男">男</Option>
                      <Option value="女">女</Option>
                    </Select>
                  )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="出生日期"
                >
                  {getFieldDecorator('birthdate', {
                    rules: [{ required: true, message: '请输入出生日期' }],
                  })(
                    <Input placeholder="请输入出生日期" />
                    
                  )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="电子邮件"
                >
                  {getFieldDecorator('email', {
                    rules: [{ required: true, message: '请输入电子邮件' }],
                  })(
                    <Input placeholder = '请输入电子邮件'/>
                  )}
                </FormItem>
                <FormItem {...tailFormItemLayout}>
                  <Button type="primary" htmlType="submit">注册</Button>
                </FormItem>
              </Form>
            </Col>
          </Row>
        </Card>
      </div>
    );
  }
}

const UserZhuce = Form.create()(userZhuce);
function mapStateToProps(state) {
  return {
   
  }
}
export default connect(
  mapStateToProps, {
    
  }
)(UserZhuce)
